
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _utils = require('../../utils');

const _icon = _interopRequireDefault(require('../../icon'));

const _loading = _interopRequireDefault(require('../../loading'));

const _uploader = _interopRequireDefault(require('../../uploader'));

// Utils
// Components
const _createNamespace = (0, _utils.createNamespace)('sku-img-uploader');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];
const t = _createNamespace[2];

const _default = createComponent({
  props: {
    value: String,
    uploadImg: Function,
    maxSize: {
      type: Number,
      default: 6,
    },
  },
  data: function data() {
    return {
      // 正在上传的图片 base64
      paddingImg: '',
      uploadFail: false,
    };
  },
  methods: {
    afterReadFile: function afterReadFile(file) {
      const _this = this;

      // 上传文件
      this.paddingImg = file.content;
      this.uploadFail = false;
      this.uploadImg(file.file, file.content).then((img) => {
        _this.$emit('input', img);

        _this.$nextTick(() => {
          _this.paddingImg = '';
        });
      }).catch(() => {
        _this.uploadFail = true;
      });
    },
    onOversize: function onOversize() {
      this.$toast(t('oversize', this.maxSize));
    },
    genUploader: function genUploader(content, disabled) {
      if (disabled === void 0) {
        disabled = false;
      }

      const h = this.$createElement;
      return h(_uploader.default, {
        class: bem('uploader'),
        attrs: {
          disabled,
          afterRead: this.afterReadFile,
          maxSize: this.maxSize * 1024 * 1024,
        },
        on: {
          oversize: this.onOversize,
        },
      }, [h('div', {
        class: bem('img'),
      }, [content])]);
    },
    genMask: function genMask() {
      const h = this.$createElement;
      return h('div', {
        class: bem('mask'),
      }, [this.uploadFail ? [h(_icon.default, {
        attrs: {
          name: 'warning-o',
          size: '20px',
        },
      }), h('div', {
        class: bem('warn-text'),
        domProps: {
          innerHTML: t('fail'),
        },
      })] : h(_loading.default, {
        attrs: {
          type: 'spinner',
          size: '20px',
          color: 'white',
        },
      })]);
    },
  },
  render: function render() {
    const _this2 = this;

    const h = arguments[0];
    return h('div', {
      class: bem(),
    }, [this.value && this.genUploader([h('img', {
      attrs: {
        src: this.value,
      },
    }), h(_icon.default, {
      attrs: {
        name: 'clear',
      },
      class: bem('delete'),
      on: {
        click: function click() {
          _this2.$emit('input', '');
        },
      },
    })], true), this.paddingImg && this.genUploader([h('img', {
      attrs: {
        src: this.paddingImg,
      },
    }), this.genMask()], !this.uploadFail), !this.value && !this.paddingImg && this.genUploader(h('div', {
      class: bem('trigger'),
    }, [h(_icon.default, {
      attrs: {
        name: 'photograph',
        size: '22px',
      },
    })]))]);
  },
});

exports.default = _default;
